import {ScrollView, View, Image} from '@tarojs/components';
import React, {Component} from 'react';
import Taro from '@tarojs/taro';
import {connect} from 'react-redux';
import './index.less';
import * as T from './types';
import actions from './actions';
import {store2Props} from './selectors';
import {AtIcon} from 'taro-ui';
import RechargeCard from './components/rechargeCard';
import RechargeNavBar from './components/rechargeNavBar';
import IplandBg from './image/iplan_bg.png';
import 'taro-ui/dist/style/components/icon.scss';
import {fetchModal, handleUrl, setModalShow} from 'wmkit';
import AdvModal from '@/pages/common/adv-modal/adv-modal';
actions().actions.loadReducer();
// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class ActivationRecord extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      navBarHeight: 0,
      navBarPadding: 0,
      isModalFlag: false,
      imgUrl: '',
      jumpPage: {},
      nextPopupId: '',
    };
  }
  componentDidMount() {
    this.updateModalStatus('');
    this.getNavHeight();
    this.props.actions.init();
  }

  getNavHeight() {
    const menuButtonObject = Taro.getMenuButtonBoundingClientRect();

    let menuBottonHeight = menuButtonObject.height;
    let navBarPadding = menuButtonObject.top;
    let navBarHeight = menuBottonHeight + navBarPadding;
    this.setState({
      navBarHeight,
      navBarPadding: navBarPadding,
    });
  }

  async updateModalStatus(id) {
    const res = await fetchModal('rechargePage');
    let popupId = null;
    if (!id && res && res.length > 0) {
      popupId = res[0].popupId;
    } else {
      popupId = id;
    }
    const flagParams = await setModalShow(res, 'rechargePage', popupId);
    this.setState(
      {
        isModalFlag: flagParams.showFlag,
        imgUrl: flagParams.imgUrl,
        jumpPage: (flagParams.jumpPage && JSON.parse(flagParams.jumpPage)) || '',
        nextPopupId: flagParams.nextPopupId,
      },
      () => {
        if (this.state.nextPopupId && !this.state.isModalFlag) {
          this.isGo(this.state.nextPopupId);
        }
      },
    );
  }
  async isGo(id) {
    await this.updateModalStatus(id);
  }
  handleClose() {
    this.setState({isModalFlag: false}, async () => {
      if (this.state.nextPopupId) {
        await this.updateModalStatus(this.state.nextPopupId);
      }
    });
  }
  render() {
    return (
      <View className="packageISyntheticRechargeMain">
        <View
          style={{
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            paddingTop: `${this.state.navBarPadding}px`,
            height: `${this.state.navBarHeight}px`,
          }}
        >
          <AtIcon
            onClick={() => {
              Taro.navigateBack();
            }}
            customStyle={{zIndex: 2}}
            value="chevron-left"
            size="30"
            color="#000"
          ></AtIcon>
          <View
            style={{
              fontSize: '36rpx',
              fontWeight: 500,
              color: '#333333',
              margin: '0 auto',
              zIndex: 2,
              transform: 'translateX(-36%)',
            }}
          >
            魔力币充值
          </View>
        </View>
        <Image src={IplandBg} className="syntheticRecharge-bg" />
        <RechargeNavBar />
        <RechargeCard />
        <AdvModal
          imgUrl={this.state.imgUrl}
          handleUrl={() => handleUrl(this.state.jumpPage)}
          handleClose={() => this.handleClose()}
          isModalFlag={this.state.isModalFlag}
        />
      </View>
    );
  }
}
